<template>
  <div class="app-container">
    <h2>5.1&nbsp;一体化设计、采购、建造、管理综合平台（含虚拟建造）</h2>
    <el-card v-for="(item,index) in items" :key="item.id" class="evaluation-item" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="number">{{ item.id }}.&nbsp;{{ item.title }}</span>
        <div class="options">
          <evaluationStd
            :_aspect="item.title"
            :_evaluatioon_index="item.evaluation_index"
            class="evaluation"
          />

          <lock
            :_locked="score[index].locked"
            :-pop-over-show="false"
            class="lock"
            @click.native="handleLock(index)"
          />
        </div>
      </div>
      <el-card
        v-for="(i,_index) in item.children_question"
        :key="_index"
        class="children-question"
        shadow="never"
      >
        <div slot="header" class="children-header">
          <div>{{ i.aspect }}.（{{ i.max_score }}分）</div>
        </div>
        <el-form ref="form" :model="i" label-width="100px">
          <el-form-item label="是否满足">
            <el-radio-group v-model="score[index].children_question[_index].satisfy">
              <el-radio
                :label="true"
                :disabled="score[index].locked"
                @change="addScore(index, _index, true)"
              >是</el-radio>
              <el-radio
                :label="false"
                :disabled="score[index].locked"
                @change="addScore(index, _index,false)"
              >否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="!score[index].children_question[_index].satisfy" label="不满足简述">
            <el-input
              v-model="score[index].children_question[_index].description"
              :disabled="score[index].locked"
              label="不满足简述"
              type="textarea"
            />
          </el-form-item>
        </el-form>
      </el-card>
      <!-- <div class="socre">
        <div class="score-title">得分&nbsp;&nbsp;</div>
        <div class="sum-score">{{item.score}}&nbsp;分</div>
      </div>-->
    </el-card>
    <div id="choose">
      <router-link to="/usage/evaluate/recycle">
        <el-button type="primary" icon="el-icon-arrow-left">上一项</el-button>
      </router-link>

      <router-link to="/addition/second">
        <el-button type="primary" style="margin-left:20px">
          下一项
          <i class="el-icon-arrow-right el-icon--right" />
        </el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Lock from "@/components/Lock";
import EvaluationStd from "@/components/EvaluationStd";

export default {
  name: "First",
  components: {
    Lock,
    EvaluationStd
  },
  data() {
    return {
      items: [
		{
			id: 1,
			title: "项目采用一体化设计、采购、建造、管理综合平台",
			children_question: [
			  {
				aspect:
				  "实现无障碍方案设计功能",
				max_score: 3
			  },
			  {
				aspect:
				  "实现专家顾问功能，完成施工图设计",
				max_score: 2
			  },
			  {
				aspect:
				  "完成项目成本分析",
				max_score: 2
			  },
			  {
				aspect:
				  "实现项目工期分析",
				max_score: 1
			  },
			  {
				aspect:
				  "部品库采购",
				max_score: 2
			  }
			],
			evaluation_index: "",
		}
      ],
      score: []
    };
  },
  computed: {
    ...mapGetters({
      additionScore: "addition",
      eId: "eId"
    })
  },
  created() {
    this.$store.dispatch("project/getHistory", this.eId);
    this.score = this.additionScore._5_1_1;
  },
  beforeDestroy() {
    this.$store.dispatch("project/updateScore", {
      score: this.score,
      phase: "addition",
      aspect: "_5_1_1"
    });
  },
  methods: {
    // 计算分数的时候，第一项可能要先获取项目资料

    handleLock(index) {
      this.score[index].locked = !this.score[index].locked;
    },
    addScore(index, _index, whether) {
      if (whether) {
        this.score[index].children_question[_index].score = this.items[
          index
        ].children_question[_index].max_score;
      } else {
        this.score[index].children_question[_index].score = 0;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  h2 {
    text-align: center;
  }
  #choose {
    text-align: center;
    margin: 20px auto;
  }
  .evaluation-item {
    width: 60%;
    margin: 10px auto;

    >>> .el-card__header {
      padding: 10px 20px;
    }
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both;
    }
    .clearfix {
      overflow: hidden;
      position: relative;
      .number {
        font-weight: bold;
        position: absolute;
        bottom: 0;
      }
      .options {
        float: right;
        bottom: 0;
        .lock,
        .evaluation {
          display: inline-block;
        }
      }
    }

    .children-question {
      width: 100%;
      border: none;

      >>> .el-card__header {
        border-bottom: 0px;
        padding: 0px 20px;
      }
      >>> .el-card__body {
        padding: 10px 20px;
      }
    }
  }
}
</style>
